<template>
	<div class="ExceptionList">
		<header><i class="iconfont icon-xiangzuo1" @click="goprev"></i><span>异常单列表</span><i
				class="iconfont icon-sousuoxiawu-" @click="ScanQueryOrderInfo"></i></header>
		<div class="container">
			<div class="AbnormalContainer " style="overflow:scroll;">
				<mt-loadmore topDropText="下拉刷新" topLoadingText="" topPullText='' bottomPullText="" bottomDropText="上拉加载"
					bottomLoadingText="" :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore"
					:autoFill="autoFill">
					<div class="AbnormalList">
						<div class="AbnormalItem" v-for='(dataItem,index) in AbnormalListData' :id="index" :key='index'>
							<div class="nomalList">
								<div>
									<span>母单号：</span>
									<span v-clipboard:copy="dataItem.omsNo" v-clipboard:success="onCopy"
										v-clipboard:error="onError">{{dataItem.omsNo}}
										<i v-clipboard:copy="dataItem.omsNo" v-clipboard:success="onCopy"
											v-clipboard:error="onError" class="iconfont icon-fuzhi"></i>
									</span>
								</div>
								<div>
									<span>SF运单号：</span>
									<span v-clipboard:copy="dataItem.clientOrderNo" v-clipboard:success="onCopy"
										v-clipboard:error="onError">{{dataItem.clientOrderNo}}
										<i v-if='dataItem.clientOrderNo' v-clipboard:copy="dataItem.clientOrderNo"
											v-clipboard:success="onCopy" v-clipboard:error="onError"
											class="iconfont icon-fuzhi"></i>
									</span>
								</div>
								<div><span>发起时间：</span><span>{{dataItem.sponsorTime}}</span></div>
							</div>
							<div class="AreaBox">
								<div>
									<span>收货联系人：</span><span>{{dataItem.receivePartyContactName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{dataItem.receivePartyPhone?(dataItem.receivePartyPhone.substring(0,3)+'****'+dataItem.receivePartyPhone.substring(7)):''}}</span>&nbsp;&nbsp;<i
										@click="callPhone(dataItem.receivePartyPhone, dataItem.omsNo)"
										class="iconfont icon-dianhua-copy"></i></div>
								<div><span>收货地址：</span><span>{{dataItem.receivePartyAddr1}}</span></div>
							</div>
							<div class="nomalList">
								<div>
									<div><span>发起人：</span><span>{{dataItem.sponsorName}}</span></div>
									<div><span>发起人承运商：</span><span>{{dataItem.operateRdcName}}</span></div>
								</div>
								<div>
									<div><span>异常环节：</span><span>{{dataItem.abnormalLink}}</span></div>
									<div><span>异常类型：</span><span>{{dataItem.abnormalType}}</span></div>
								</div>
								<!-- <div><span>异常原因：</span><span>{{dataItem.abnormalReason}}</span></div> -->
								<div><span>责任方：</span><span>{{dataItem.responsibleParty}}</span></div>
								<div><span>异常描述：</span><span>{{dataItem.abnormalExplain}}</span></div>
								<!-- <div><span>处理结果：</span><span>{{dataItem.downResult}}</span></div> -->
							</div>
							<!--   <div class="KeyInfoGroup">
					<div v-if='dataItem.chargeTypes=="到付"'><span>到付</span></div>
					<div v-if='dataItem.returnBillFlag=="T"'><span>签回单</span></div>
			  </div> -->
							<div class="operateBtn">
								<div @click="abnormalSign(index)">异常单签收</div>
							</div>
						</div>
						<div v-if="allLoaded && AbnormalListData.length " class="nodata_label">没有更多数据</div>
						<div class="kong"></div>
						<div v-if="is_NoData" class="nodata_kong"></div>
					</div>
				</mt-loadmore>
			</div>
		</div>
		<!-- 页面数据为空时 -->
		<div v-if="is_NoData" class="NoData">
			<div>
				<i class="iconfont icon-meiyouwuliuxinxi"></i>
				<div>{{is_NoData_text}}</div>
			</div>
		</div>
		<div v-if="ifTips" class="msg_tips msg_tips1">
			<div class="tips_content">
				<i class="iconfont icon-chenggong1"></i>
				<span>{{tips_Msg}}</span>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import * as fetchObj from '@/api/index/exceptionList';
	export default {
		name: 'ExceptionList',
		data() {
			return {
				fetchObj,
				AbnormalListData: [], // 派件段异常订单列表
				is_NoData: false, // 没有数据模块样式  是否显示
				is_NoData_text: '没有异常订单', // 没有数据模块样式  显示的文字
				numberPerPage: 15, // 每页显示几条
				loadPage: 1, // 当前第几页
				allLoaded: true, // 上拉刷新还能上拉刷新
				autoFill: false,
				tips_Msg: '', // 提示信息
				ifTips: false
			}
		},
		mounted() {},
		created() {
			this.loadData();
		},
		methods: {
			// 加载页面数据
			loadData(load) {
				let that = this;
				let postData = {
					start: this.loadPage, // 当前第几页
					pageSize: this.numberPerPage, // 每页显示几条
					cellphone: that.$store.state.userInfo.cellphone // 手机号
				};
				console.log(postData)
				this.httpRequest1('post', this.fetchObj.abnormalOrderApp, postData).then(res => {
					if (load) {
						if (load == 'TopLoad') {
							that.$refs.loadmore.onTopLoaded();
						} else if (load == 'BottomLoad') {
							that.$refs.loadmore.onBottomLoaded();
						}
					}
					//上拉加载后 数据拼接
					if (that.loadPage > 1) {
						that.AbnormalListData = that.AbnormalListData.concat(res.entity.list || [])
					} else {
						that.AbnormalListData = res.entity.list || [];
						if (that.AbnormalListData.length) {
							that.is_NoData = false; // 没有数据模块 是否显示
						} else {
							that.is_NoData_text = '没有异常订单'
							that.is_NoData = true;
						}
					}
					// 判断是否能上拉加载
					if (res.entity.list && res.entity.list.length < that.numberPerPage) {
						that.allLoaded = true;
					} else {
						that.allLoaded = false;
					}
				}).catch(function (err) {
					that.is_NoData_text = '没有异常订单'
					that.is_NoData = true;
				})
			},
			// 异常单签收 按钮
			abnormalSign(index) {
			},
			// 跳转到 扫描面单定位订单信息
			ScanQueryOrderInfo() {
				this.$router.push({
					name: 'ScanQueryOrderInfo',
				})
			},
			// 返回上一页
			goprev() {
				this.$router.push({
					name: 'Index',
				})
			},
			// 下拉刷新
			loadTop() {
				this.loadPage = 1;
				this.allLoaded = false;
				this.loadData('TopLoad');
			},
			// 上拉加载
			loadBottom() {
				let that = this;
				if (that.allLoaded) {
					that.$refs.loadmore.onBottomLoaded();
					return;
				} else {
					that.loadPage += 1;
				}
				this.loadData('BottomLoad');
			},
			onCopy() {
				let that = this;
				that.ifTips = true;
				that.tips_Msg = '复制成功';
				setTimeout(function () {
					that.ifTips = false;
				}, 1000)
			},
		}
	}

</script>
<style lang="less" scoped>
	@import "../../components/publicLess.less";
	.ExceptionList {
		overflow: hidden;
		font-size: 29/50rem;
		height: 100%;
		background-color: #f4f4f4;
		.container {
			height: 100%;
			padding: 0 20/50rem 0;
			background-color: #f4f4f4;
			.AbnormalContainer {
				height: 100%;
			}
		}
		.AbnormalList {
			padding-top: 20/50rem;
			.AbnormalItem {
				position: relative;
				background-color: #fff;
				border-radius: 20/50rem;
				text-align: left;
				margin-bottom: 15/50rem;
				overflow: hidden;
				padding: 20/50rem;
				box-sizing: border-box;
				.nomalList {
					&>div {
						line-height: 55/50rem;
						overflow: hidden;
						&>div {
							float: left;
							width: 50%;
						}
					}
				}
				.AreaBox {
					border: 1/50rem solid #09d2b7;
					border-radius: 8/50rem;
					padding: 10/50rem;
					margin: 15/50rem 0;
					&>div {
						line-height: 55/50rem;
						overflow: hidden;
						&>div {
							float: left;
							width: 50%;
						}
					}
				}
				.KeyInfoGroup {
					position: absolute;
					top: 20/50rem;
					right: 0;
					display: flex;
					&>div {
						width: auto;
						padding: 5/50rem 10/50rem;
						border-radius: 10/50rem;
						color: @PublicColor;
						border: 1/50rem solid @PublicColor;
						margin-right: 20/50rem;
					}
				}
				.operateBtn {
					margin-top: 20/50rem;
					display: flex;
					justify-content: flex-end;
					div {
						flex-grow: 1;
						max-width: 32%;
						margin-left: 15/50rem;
						text-align: center;
						background-color: @PublicColor;
						color: #fff;
						border-radius: 15/50rem;
						line-height: 60/50rem;
					}
					div:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}
	}
</style>